<template>
    <div class="signin">
        <el-card class="ms-sign">
            <!-- 内容区域 -->
            <div>
                用户注册
            </div>
            <div v-show="activeStep === 0" class="step1">
                <el-form :model="form" label-width="100px">
                    <el-popover
                    placement="bottom-start"
                    trigger="click"
                    width="200" v-model="popoverVisible">
                    <div style="text-align: center;">
                        <div v-for="avatar in avatars"
                                :key="avatar.value"
                                :style="{border: 'none', backgroundColor: form.avatarUrl === avatar.value ? '#409eff' : '#f5f7fa', color: form.url === avatar.value ? '#fff' : '#606266'}"
                                class="avadiv"
                                @click="selectAvatar(avatar.value)">
                            <el-avatar :size="45" :src="avatar.url"></el-avatar>
                        </div>
                    </div>
                    <div slot="reference" class="ava">
                        <el-avatar :size="100" :src="form.avatarUrl"></el-avatar>
                    </div>
                    </el-popover>
                <!-- 第一步内容：选择头像和昵称 -->
                <el-form-item label="性别">
                    <el-radio-group v-model="form.genderType">
                        <el-radio  key="1" label="男"></el-radio>
                        <el-radio  key="2" label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="form.nickName" placeholder="请输入昵称"></el-input>
                </el-form-item>
                </el-form>
                <div style="text-align: center; margin-top: 20px;">
                    <el-button  @click="backLogo">返回</el-button>
                    <el-button type="primary" @click="nextStep">下一步</el-button>
                </div>
            </div>
        
            <div v-show="activeStep === 1" class="step2">
                <!-- 第二步内容：输入登录信息 -->
                <el-form :model="form" label-width="100px">
                <el-form-item label="登录名" prop="username">
                    <el-input v-model="form.userName" placeholder="请输入登录名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.contactTel" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"  placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password">
                    <el-input type="password" v-model="form.repassword"  placeholder="请再次输入"></el-input>
                </el-form-item>
                </el-form>
                <div style="text-align: center; margin-top: 20px;">
                    <el-button  @click="nextStep">上一步</el-button>
                    <el-button type="primary" @click="submitForm">提交注册</el-button>
                </div>
            </div>
        </el-card>
    </div>
  </template>
  
  <script>
  import {signIn} from '@/api/user'
  export default {
    data() {
      return {
        activeStep: 0, // 当前步骤
        popoverVisible: false, // 弹出框是否可见
        form:{
            avatarUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            userName:'',
            nickName:'',
            password:'',
            contactTel:'',
            genderType:'',

        },
        formDataStep1: {
          avatar: '', // 头像选择
          nickname: '' // 昵称输入
        },
        formDataStep2: {
          username: '', // 登录名
          phone: '', // 手机号
          password: '' // 密码
        },
        avatars: [ // 预设的头像列表
          { value: '/avatar/男孩.png', url: '/avatar/男孩.png' },
          { value: '/avatar/女孩.png', url: '/avatar/女孩.png' },
          { value: '/avatar/男学生.png', url: '/avatar/男学生.png' },
          { value: '/avatar/女学生.png', url: '/avatar/女学生.png' },
          { value: '/avatar/爸爸.png', url: '/avatar/爸爸.png' },
          { value: '/avatar/妈妈.png', url: '/avatar/妈妈.png' },
          // 添加更多头像
        ]
      };
    },
    methods: {
      nextStep() {
        if (this.activeStep === 0) {
            this.activeStep++;
        }else if (this.activeStep === 1) {
            this.activeStep--;
        }
      },
      submitForm() {
        // 提交表单逻辑，这里只是简单示例，实际需要发送请求给后端处理
        console.log('提交注册信息:', this.formDataStep1, this.formDataStep2);
        signIn(this.form).then(res=>{
          if(res.code == 200){
            this.$message.success('注册成功');
            this.$router.push('/login')
          }else{
            this.$message.error('注册失败');
          }
        })
        
      },
      selectAvatar(avatarValue) {
        // 更新当前选择的头像
        this.form.avatarUrl = avatarValue;
        this.popoverVisible = false
      },
      backLogo(){
        this.$router.push('/login')
      }
    }
  };
  </script>
  
  <style scoped>
  /* 样式可根据需求自行定义 */
  .signin{
    position: relative;
    width: 100%;
    height: 100%;
    /* background-image: url(../../assets/img/login-bg.jpg); */
    background-color: #fff;
    background-size: 100%;
  }
  .ms-sign {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 450px;
    width: 450px;
    margin-left: -175px;
    margin-top: -225px;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
  }
  .ms-sign .step1{
    padding-top: 50px;
  }
  .ms-sign .step1 .ava{
    margin: 0 auto;
    width: 100px;
  }
  .avadiv{
    width: 50%;
    display: inline-block;
  }
  .ms-sign .step2{
    padding-top: 50px;
  }
  </style>
  